from nicegui import ui
from ex4nicegui import ref_computed, effect, to_ref, effect_refreshable
from ex4nicegui.reactive import rxui

'''
icon : 小图标组件
props: clearable(输入框的删除功能)
        http://quasarchs.com/vue-components/input
        删除:clearable clear-icon="close" (无圆的删除)
             clearable (有圆的删除)
        类型:
            密码: type="password" hint="Password";同时,input中,设置:password=True,password_toggle_button=True (是否为密码;是否显示密码显示小图标)
            邮箱: type="email" hint="Email"
            搜索: filled type="search" hint="Search";同时,添加组件icon:search
            时间: type="time" hint="Native time"
            日期: type="time" hint="Native time"
        特殊:
            长文本自动拖展: autogrow
            后缀名称: suffix="setname"
            去抖模式: debounce="500" (输入后500ms内没有输入,就调用绑定函数)
            外部包裹线: outlined
            
            
'''

'''
对于文字更改样式用style
对于框更改用classes
'''



# props用于属性设置!
# input = ui.input('此处写标题', value='此处写默认值',).props(
#     'clearable color="teal" filled v-model="text" label="Label" filled filled type="search" hint="Search"')  # props里为html标签!!!
#
# # slot可以插槽,使图标放入!
# with input.add_slot('prepend'):  # prepend表示在前加!!!
#     # 使用with语法,往容器里放东西!
#     ui.icon('place', color='teal')
#
# with input.add_slot('append'):  # append表示在后加!!!
#     ui.icon('search', color='teal')
#
# with input.add_slot('before'):
#     ui.avatar('https://cdn.quasar.dev/img/avatar5.jpg')




#####绑定事件######
# def setname():
#     label.text=input.value
#
# input = ui.input("绑定事件",value='未输入',on_change=setname).props(
#     'debounce="500" suffix="setname" autogrow clearable color="teal" filled v-model="date" filled clearable filled'
# )
# label=ui.label()




### 官方数据绑定 ###
'''缺点:在后台高频执行:print(1)/result!!!'''
# from dataclasses import dataclass
#
#
# @dataclass
# class DataMode1(object):
#     input_value1: str  # 代表输入框值
#     input_value2: str
#
#     @property
#     def result(self):
#         print(1)
#         return self.input_value1+self.input_value2
#
#
# dm = DataMode1('','')
# label = ui.label().bind_text(dm,'result')
# input = ui.input("数据绑定").bind_value(dm,'input_value1')
# input = ui.input("数据绑定").bind_value(dm,'input_value2')







# ### 高效的数据绑定 ###
# from ex4nicegui import to_ref, ref_computed, effect  # 导入依赖
#
# # 数据定义 #
# c1 = to_ref('')  # 创建对象
# c2 = to_ref('')
# # result = ref_computed(lambda :c1.value+c2.value)
# # result = ref_computed(lambda: c1.value)  # 绑定返回
#
# # 定义一个响应式变量,默认开启
# use_input2 = to_ref(True)
# @ref_computed
# def result():
#     if use_input2.value:
#         return c1.value+c2.value
#     else :
#         return c1.value
#
# # 界面定义 #
# input1 = rxui.input("数据绑定", value=c1)  # 绑定输入框
#
# rxui.switch('使用input2',value=use_input2)
# input2 = rxui.input("数据绑定", value=c2)
#
# label = rxui.label(result)  # 绑定文本框




# ### 按钮的创建与右键菜单 ###
# from ex4nicegui import effect_refreshable
# with ui.button("按钮文本"):
#     ui.tooltip("按钮提示词")
#     with ui.menu().props("context-menu",remove="no-parent-event"):
#         ui.menu_item("右键选项1")
#         ui.menu_item("右键选项2")
#         ui.menu_item("右键选项3")
#         ui.menu_item("右键选项4")




### 容器的建立 ###
'''
常见的布局容器有:
    row
    column
    grid
    div (最基础)

    方法:
        clear()清除!
        
'''

# # 这是一个笨办法,官方给了快捷方式!
# def onchange(): #创建监听事件
#     box.clear()  # 清除容器内容
#
#     with box:
#         for num in range(slider.value):
#             ui.label(str(num))
#
# slider = ui.slider(min=1,max=10,on_change=onchange)  # 创建滑动条!
#
# box = ui.element('div')


# # 快速构建因滑动条而创建多文本的代码
# r_num = to_ref(1)
# rxui.slider(1,10,value=r_num)
#
# @effect_refreshable
# def _():
#     for num in range(r_num.value):
#         ui.label(str(num))
# 对于响应式的数据,可以采用lambda的形式
# text = ref_computed(lambda: f"a={a.value};b={b.value}")



ui.run()
